<template>
  <div class="monitoring-pie-box">
    <e-charts class="echarts-pie" :options="options" />
  </div>
</template>

<script>
import ECharts from "@/component/ECharts";

export default {
  name: "MonitoringPie",

  components: {
    ECharts,
  },

  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    title: {
      type: String,
      default() {
        return "";
      },
    },
  },

  data() {
    return {
      color: ["#00FFFF", "#fff", "#FF2222"],
    };
  },

  computed: {
    options() {
      //当前视口宽度
      let nowClientWidth = document.documentElement.clientWidth;
      // 换算方法
      let nowSize = function (val, initWidth = 1920) {
        return val * (nowClientWidth / initWidth);
      };
      let max = 0;
      let series = this.data.map((item, index) => {
        max += Number(item.value);
        return {
          type: "bar",
          name: item.name,
          data: [
            {
              value: item.value,
              itemStyle: {
                color: this.color[index],
                shadowColor: this.color[index],
                shadowBlur: 3,
              },
            },
          ],
          barWidth: 10,
          stack: "sameBar",
          coordinateSystem: "polar",
          z: 3,
        };
      });

      series.push({
        type: "bar",
        barWidth: 1,
        show: false,
        data: [
          {
            name: "",
            value: max,
            itemStyle: {
              color: "transparent",
            },
          },
        ],
        coordinateSystem: "polar",
      });
      return {
        title: [
          {
            text: this.title,
            top: "78%",
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: nowSize(14),
            },
          },
          {
            text: "总数：" + max,
            top: "37%",
            left: "center",
            textStyle: {
              color: "#00F6FF",
              fontSize: nowSize(12),
            },
          },
          {
            text: this.data[0].value,
            top: "64%",
            left: "21%",
            textStyle: {
              color: "#00FFFF",
              fontSize: nowSize(12),
            },
          },
          {
            text: this.data[1].value,
            top: "64%",
            right: "21%",
            textStyle: {
              color: "#FF2222",
              fontSize: nowSize(12),
            },
          },
          {
            text: "闲置：" + this.data[2].value,
            top: "63%",
            right: "center",
            textStyle: {
              color: "#fff",
              fontSize: nowSize(12),
              fontWeight: "lighter",
            },
          },
        ],
        color: this.color,
        tooltip: {
          trigger: "item",
        },

        angleAxis: {
          show: false,
          max: (max * 360) / 210,
          type: "value",
          startAngle: 195,
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          show: false,
          type: "category",
        },
        polar: {
          center: ["50%", "54%"],
          radius: "180%",
        },
        series: series,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.monitoring-pie-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
  .echarts-pie {
    width: 100%;
    height: 100%;
  }
}
</style>
